<template>
  <div class="box-main1">
    <div class="box-header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/admin/index' }"
          >控制台</el-breadcrumb-item
        >
        <el-breadcrumb-item>在线视频观看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="box-main2">
      <div class="box-search2">
        <div class="box-input2" style="width: 180px">
          <el-input
            @keydown.enter.native="clkBtnSearch"
            @clear="clkBtnSearch"
            clearable
            size="mini"
            v-model="searchInfo.searchKey"
            placeholder="视频名称"
          ></el-input>
        </div>
        <div class="box-input2" style="width: 180px">
          <el-select
            v-model="value"
            size="mini"
            @change="clkBtnSearch"
            filterable
            placeholder="请选择专业阶段"
            class="selectValue"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="box-input2">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-search"
            @click="clkBtnSearch"
            >搜索</el-button
          >
          <!-- v-if="
              _hasPermission(userPermissions, 'class_manage' || 'system_manage')
            " -->
          <span>
            <!-- <el-upload
              style="display: inline-block"
              name="uploadFile1"
              :show-file-list="false"
              :action="actionUrl"
              :auto-upload="true"
              :on-success="videoSuccess"
              :on-error="videoErr"
              :before-upload="beforeUpload"
            >
              <el-button size="mini" type="primary">上传视频</el-button>
            </el-upload> -->
            <el-button
              size="mini"
              type="primary"
              @click="flieAlertIsShow = true"
              >上传视频</el-button
            >
          </span>
          <div class="flie" v-if="flieAlertIsShow">
            <p class="flieTitle">上传视频</p>
            <input type="flie" />
          </div>
        </div>
      </div>
    </div>
    <div class="videoList">
      <nav v-for="item in videoInfoList" :key="item.noid">
        <!-- <video :src="item.video_path"></video> -->
        <div class="videoPath">
          <img src="../../assets/艾斯德斯.jpg" alt="" />
        </div>
        <p class="videoName">{{ item.video_name }}</p>
      </nav>
      <nav></nav>
      <nav></nav>
      <nav></nav>
      <nav></nav>
      <nav></nav>
      <nav></nav>
    </div>
    <!-- <div class="box-content3">
      <div class="box-content3-left-video-item">
        <el-table
          class="tbl1"
          :data="videoInfoList"
          :border="true"
          :stripe="true"
          size="small"
        >
          <el-table-column type="index" :index="1" width="30"></el-table-column>
          <el-table-column label="视频名称" align="left">
            <template slot-scope="scope">
              <el-tooltip placement="top" :open-delay="1000">
                <div slot="content">{{ scope.row.video_name }}</div>
                <span class="video_name" @click="clkVideoPath(scope.row)">{{
                  scope.row.video_name
                }}</span>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column
            v-if="
              _hasPermission(userPermissions, 'class_manage' || 'system_manage')
            "
            label="操作"
            width="45"
          >
            <template slot-scope="scope">
              <span>
                <el-button
                  type="warning"
                  size="mini"
                  @click="clkBtnDelete(scope.row)"
                  >删除</el-button
                >
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="box-content3-right-video-show">
        <div class="test_two_box">
          <video ref="myVideo" class="video-js"></video>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import request from '@/common/utils/request';
import PermissionHelper from "@/common/utils/PermissionHelper";

export default {
  computed: {
    userPermissions () {
      return this.$store.state.userPermissions;
    },
  },
  data () {
    return {
      searchInfo: { searchKey: null },

      pageInfo: { pageNum: 1, pageSize: 12 },
      pageLoading: false,

      showVideoDialog: false,
      video: {},
      videoInfoList: [],
      actionUrl: '',
      options: [{
        value: '01',
        label: '专业三'
      }, {
        value: '02',
        label: '专业四'
      }, {
        value: '03',
        label: '专业五'
      }],
      value: '',

      player1: null,
      flieAlertIsShow: false,
      videoOptions: {
        autoplay: 'muted',//自动播放
        controls: true,//用户可以与之交互的控件
        loop: true,//视频一结束就重新开始
        muted: false,//默认情况下将使所有音频静音
        aspectRatio: "16:9",//显示比率
        fullscreen: {
          options: { navigationUI: 'hide' }
        },
      },
    };
  },
  mounted () {
    this._initData();
    this.initVideo();
  },
  watch: {
    $route: {
      handler: function (to, from) {
        if (to.path == '/admin/video_view') {

        }

      }, immediate: true
    },
  },
  methods: {
    initVideo () {
      //初始化视频方法
      this.player1 = this.$video(this.$refs.myVideo, this.videoOptions);
    },
    _hasPermission (allPermissions, searchPermission) {
      return PermissionHelper.hasPermission(allPermissions, searchPermission);

    },
    videoSuccess (file, fileList) {
      if (file.code == 0) {
        this.$alert("上传成功~")
      } else {
        this.$alert("上传失败！")
      }
      this.getPage();
    },
    getPage () {
      let url1 = this.settings.apiUrl + "/video_list";
      let d1 = {};
      d1.searchKey = this.searchInfo.searchKey;
      request.post(url1, d1).then((d1r) => {
        this.pageLoading = false;
        if (d1r.code === 0) {
          this.videoInfoList = d1r.data;
          console.log(this.videoInfoList);
        } else {

          this.$alert('获取视频信息失败：' + d1r.msg, '提示', {
            type: 'warning'

          });

        }
      }).catch(err => {
        this.pageLoading = false;
      });
    },
    clkBtnDelete (row) {

      this.$confirm("您确定删除这条记录吗", "提示").then(() => {
        let url1 = this.settings.apiUrl + "/video_delete";
        let d1 = { 'noid': row.noid, 'video_path': row.video_path };
        request.post(url1, d1).then((d1r => {
          if (d1r.code == 0) {
            this.$alert("删除成功");
            this.getPage();
          } else {
            this.$alert("删除失败");
          }
        }))
      })


    },
    clkVideoPath (row) {
      let url1 = this.settings.apiUrl + "/video_path";
      let d1 = { row };
      let view_path = "2345";
      request.post(url1, d1).then((d1r => {
        if (d1r.code == 0) {
          view_path = d1r.data;
          let v1 = view_path + "/" + row.video_path;
          this.player1.src({ src: v1 });
        }
      }))

    },
    beforeUpload (file) {
      var that = this;
      //文件类型
      const isLt1024M = (file.size / 1024 / 1024) < 1024;
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1);
      if (!fileName.endsWith("mp4")) {
        this.$message('文件类型不是mp4文件')
      }
      if (!isLt1024M) {
        this.$message('上传视频大小不能超过1024MB哦!');
      }

    },
    videoErr (file, fileList) {
      this.$alert("上传失败！");
    },

    _initData () {
      this.actionUrl = this.settings.apiUrl + "/video_upload";
      this.getPage();
    },

    clkBtnSearch () {
      this.getPage();
    },
  },



};
</script>

<style lang="scss" scoped="scoped">
.box-main1 {
  min-height: 100%;
  /*background-color: #CCE8CF;*/
  // background-color: #c7edcc;
}
.box-main2 {
  background-repeat: no-repeat;
  background-size: cover;
}

.box-header2 {
  height: 30px;
  background-color: #eceeef;
  padding-left: 20px;
  padding-top: 8px;
}

.box-search2 {
  display: flex;
}

.box-page2 {
  display: flex;
  justify-content: flex-end;
}

.box-search2 {
  padding-bottom: 0px;
  .box-input2 {
    padding-right: 10px;
  }
}
.selectValue {
  float: left;
}
.videoList {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.videoList nav {
  width: 200px;
  height: 200px;
  margin-top: 5px;
}
.videoList .videoPath img {
  width: 100%;
  cursor: pointer;
}
.videoList .videoName {
  font-size: 12px;
}
.flie {
  position: absolute;
  width: 500px;
  height: 300px;
  background: #fff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
// .box-content3 {
//   display: flex;
//   margin-left: 10px;
//   padding: 0px 60px 20px 10px;
//   overflow: hidden;
// }
// .box-content3 .box-content3-left-video-item {
//   width: 230px;
//   height: 450px;
//   overflow-x: scroll;
//   /*background-color: green;*/
//   border: 1px solid #e2e2e2;
// }
// .box-content3 .box-content3-left-video-item .video_name {
//   text-overflow: ellipsis;
//   overflow: hidden;
//   white-space: nowrap;
//   cursor: pointer;
// }
// .box-content3-right-video-show {
//   flex: 1;
//   /*float: left;*/
//   margin-left: 30px;
// }
</style>
